<template>


    <div id="editSection" ref="edit"></div>


</template>

<!------------------------------>

<script setup lang="ts">
import Editor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style


//Flag:props
interface prop {
    height?: string,
    modelValue?: any  //默认的v-model值
    view?: boolean
}
const props = withDefaults(defineProps<prop>(), {
    height: 'auto',
    view: false
})
//Flag:emit
const emit = defineEmits(['update:modelValue'])


//Flag:组件初始化
let edit = ref()
//挂载在editSection上 实例必须在dom挂载后才可获取
let setValue = ref()
onMounted(() => {
    if (edit.value) {
        let note = new Editor({
            el: edit.value,
            viewer: props.view,
            previewStyle: 'tab',
            height: props.height,
            initialEditType: "markdown",
        }) //默认使用base64存储图片
        //Flag:达成的效果是,父组件调用子组件事件获取数据 所以要调用hook
        note.on('change', (type: string) => {
            //Note:一个很好的调用思路,值得学习
            emit('update:modelValue', note[type == 'markdown' ? 'getMarkdown' : 'getHTML']())
        })
        //实例抛出
        // Flag:暴露方法给父组件获取数据
        const set = function (data: string,type?: string) {
            if (type == 'html')
                note.setHTML(data)
            else 
                note.setMarkdown(data)
        }
        setValue.value = set
    }
})
defineExpose({
    setValue,
})






</script>

<!------------------------------>

<style scoped lang="scss">
</style>